<template>
    <div class="info-collect">
        <Crumb name="My Sale Approval"></Crumb>
        <div class="content">
            <Search>
                <el-input
                        v-model="key"
                        size="small"
                        class="input"
                        placeholder="Search By Customer"
                        prefix-icon="el-icon-search"
                ></el-input>
                <el-button
                        size="small"
                        type="primary"
                >Search
                </el-button>
            </Search>
            <div class="table-wrapper">
                <el-table
                        :data="visitList"
                        border
                        stripe
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="props">
                            <el-form label-position="left" inline class="demo-table-expand">
                                <el-form-item label="Detail">
                                    <span>{{ props.row.detail }}</span>
                                </el-form-item>
                                <el-form-item label="Reason">
                                    <span>{{ props.row.reason }}</span>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="Title"
                            width="180"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="customerName"
                            label="Customer"
                            width="250">
                    </el-table-column>
                    <el-table-column
                            prop="times"
                            label="Date"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="progress"
                            label="Progress"
                            width="200"
                    >
                    </el-table-column>
                    <el-table-column label="Opr">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="openEdit(scope.row)">My suggestion
                            </el-button>
                            <!--<el-button-->
                                    <!--size="mini"-->
                                    <!--type="danger"-->
                                    <!--@click="console.log(scope.$index, scope.row)">Delete-->
                            <!--</el-button>-->
                        </template>
                    </el-table-column>
                </el-table>

                <div class="page">
                    <el-pagination background
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"> </el-pagination>
                </div>
            </div>

            <div class="modal-wrapper">
                <el-dialog
                        title="Suggestion"
                        :visible.sync="dialogVisible"
                        width="80%"
                        >

                    <el-form :model="ruleForm"  ref="ruleForm" label-width="200px" class="demo-ruleForm">

                        <el-form-item label="Reason" prop="detail">
                            <el-input
                                    type="textarea"
                                    :autosize="{ minRows: 4, maxRows: 8}"
                                    v-model="ruleForm.reason"> </el-input>
                        </el-form-item>
                    </el-form>


                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">Reject</el-button>
                        <el-button type="primary" @click="submitForm">Approve</el-button>
                    </span>
                </el-dialog>
            </div>

        </div>
    </div>
</template>

<script>
    import Crumb from '@/components/common/crumb'
    import Search from '@/components/common/search'

    export default {
        name: "info-collect",
        data() {
            return {
                visitList: [{
                    title: 'T2000 Truck discount',
                    customerName: "Violence",
                    times: '2018-12-12',
                    progress: "Reject",
                    detail:'new customer and good for full payment',
                    reason:'too much discount',
                    id: 2
                },
                    {
                        title: 'T2000 Truck discount',
                        customerName: "Violence",
                        times: '2018-12-12',
                        address: "Naxian Rd,Shanghai,China",
                        id: 3
                    },
                    {
                        title: 'T2000 Truck discount',
                        customerName: "Violence",
                        times: '2018-12-12',
                        address: "Naxian Rd,Shanghai,China",
                        id: 4
                    },
                    {
                        title: 'T2000 Truck discount',
                        customerName: "Violence",
                        times: '2018-12-12',
                        address: "Naxian Rd,Shanghai,China",
                        id: 5
                    },
                    {
                        title: 'T2000 Truck discount',
                        customerName: "Violence",
                        times: '2018-12-12',
                        address: "Naxian Rd,Shanghai,China",
                        id: 6
                    }, {
                        title: 'T2000 Truck discount',
                        customerName: "Violence",
                        times: '2018-12-12',
                        address: "Naxian Rd,Shanghai,China",
                        id: 7
                    },
                    {
                        title: 'T2000 Truck discount',
                        customerName: "Violence",
                        times: '2018-12-12',
                        address: "Naxian Rd,Shanghai,China",
                        id: 8
                    }
                ],
                ruleForm: {
                    reason:''
                },
                key: '',
                total: 11,
                dialogVisible:false
            }
        },
        methods: {
            submitForm(){

            },
            clear(){
                this.reason = ''
            },
            openAdd(){
                this.clear();
                this.dialogVisible = true
            },
            openEdit(r){
                this.ruleForm.title = r.title;
                this.ruleForm.customerName = r.customerName;
                this.ruleForm.times = r.times;
                this.ruleForm.address = r.address;
                this.ruleForm.detail = r.detail;
                this.id = r.id;
                this.dialogVisible = true

            },
            changePage(page) {
                alert(page)
            }
        },
        components: {
            Crumb, Search
        }
    }
</script>

<style scoped lang="scss">
    .info-collect {
        background: #f6;
        .content {
            text-align: left;
            padding: 20px 0;
            .table-wrapper {
                margin-top: 20px;
            }
            .page {
                text-align: center;
                margin-top: 10px;
            }
        }
    }
    .demo-table-expand {
        font-size: 0;
    }
    .demo-table-expand label {
        width: 90px;
        color: #99a9bf;
    }
    .demo-table-expand .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
</style>